<template>
  <div class="chooseSupplier">
    <el-form class="mt20" :inline="true" :model="searchInfo" ref="searchForm">
      <el-form-item label="所属城市:" prop="productName">
        <el-select v-model="searchInfo.cityId" placeholder="全部" size="mini" filterable clearable>
          <el-option
            v-for="item in cityList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商名称:" prop="productNo">
        <el-input
          v-model="searchInfo.enterpriseName"
          size="mini">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch()" size="mini">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="resetForm('searchForm')" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card class="jxf-table-card">
      <div slot="header">
        <span>供应商</span>
      </div>
      <el-radio-group class="pd20" v-model="supplyId" @change="changeSupply">
        <el-row type="flex" justify="space-between">
          <el-col v-for="item in enterpriseNameList" :key="item.label">
            <el-radio :label="item.label">{{item.value}}</el-radio>
          </el-col>
        </el-row>
      </el-radio-group>
      <jxf-pagination :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
      <p class="pd20 pt0 c-gray">您当前选择的供应商是：{{supplyName}}</p>
    </el-card>
    <div class="mt20 text-center">
      <el-button type="primary" @click="nextStep1">{{title}}</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ChooseSupplier",
    props: {
      title: {
        type: String,
        default: "下一步"
      }
    },
    data() {
      return {
        cityList: [],
        searchInfo: {
          enterpriseName: '',
          cityId: null,
        },
        supplyId: null,
        supplyName: "",
        enterpriseNameList: [],
        currentPage: 1,
        pageSize: 10,
        pageTotal: 0
      }
    },
    methods: {
      // 获取城市列表
      getCityList() {
        ajax.post(apis.product.getCityById, {type: 5})
          .then(res => {
            if (res.success === true && res.data !== []) {
              this.cityList = res.data.map(item => {
                return {
                  label: item.name,
                  value: item.id
                }
              })
            }
          })
      },
      // 获取供应商列表
      getSupplierList() {
        let info = {...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage}
        ajax.post(apis.product.getSupplierList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.enterpriseNameList = res.data.dataList.map(item => {
                  return {
                    label: item.id,
                    value: item.enterpriseName
                  }
                })
              } else {
                this.enterpriseNameList = []
              }
            }
          })
      },
      changeSupply(val) {
        let index = this.enterpriseNameList.findIndex(item => item.label === val)
        this.supplyName = index >= 0 ? this.enterpriseNameList[index].value : ""
      },
      nextStep1() {
        if (this.supplyId === null) {
          this.$confirm('<h2>操作失败</h2><p style="padding: 10px;" class="c-gray">请选择供应商</p>', {
            showCancelButton: false,
            showConfirmButton: false,
            dangerouslyUseHTMLString: true,
            customClass: "jxf-errorTip",
            type: 'error',
            center: true
          }).then(() => {
          }).catch(() => {
          });
        } else {
          this.$emit("nextStep1", this.supplyId)
          // this.refreshPage()
        }
      },
      // 搜索表单重置
      resetForm(formName) {
        this.searchInfo = {
          enterpriseName: '',
          cityId: null,
        };
        this.$refs[formName].resetFields()
      },
      // 搜索
      onSearch() {
        this.supplyId = null
        this.supplyName = ''
        this.currentPage = 1
        this.getSupplierList()
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getSupplierList()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getSupplierList()
      },
      // 刷新页面
      refreshPage() {
        this.supplyId = null
        this.supplyName = ""
        this.currentPage = 1
        this.pageSize = 10
        this.$refs.searchForm.resetFields()
        this.getSupplierList()
      }
    },
    mounted() {
      this.getCityList()
      this.getSupplierList()
    }
  }
</script>

<style lang="scss" scoped>
  .pt0 {
    padding-top: 0;
  }

  .el-row {
    flex-wrap: wrap;
    .el-col {
      width: 50%;
      .el-radio {
        padding: 10px;
      }
    }
  }
</style>
